<template>
    <el-col :span="24" style="padding-left: 100px;">
        <el-button type='text' @click="addProduct">添加成分数据</el-button>
        <el-table :data="value"
            size='small'
            style="width: 100%">
            <el-table-column prop="name" label="成分名字" width="180" fixed>
            </el-table-column>
            <el-table-column prop="count" label="数量" width="180">
                <template v-slot="{ row }">
                    <el-input size="mini" placeholder="输入数量" v-model="row.count"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" width="180">
            </el-table-column>
            <el-table-column prop="supplier_name" label="厂商" width="180">
                <template v-slot="{ row }">
                    <el-input size="mini" placeholder="输入厂商" v-model="row.supplier_name"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180">
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="180">
            </el-table-column>
            <el-table-column prop="place" label="产地" width="180">
            </el-table-column>
            <el-table-column prop="brand" label="品牌" width="180">
            </el-table-column>
            <el-table-column label="操作" width="96" fixed="right">
                <template v-slot="{ row }">
                    <el-button @click="deleteEvt(row.detail_id)" type='text' size='small'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <ProductPicker v-model="show" @pickDataEvt="pickDataEvt"/>
    </el-col>
</template>

<script>
    import ProductPicker from './ProductPicker.vue'

    export default {
        components: { ProductPicker },
        // v-model指令是基于数据双向绑定实现的，它的底层原理是使用value属性来绑定数据，input事件来修改数据
        props: {
            value: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                show: false
            }
        },
        methods: {
            addProduct() {
                this.show = true
            },
            pickDataEvt(rows) {
                this.$emit('input', rows.map(it => ({
                    "detail_id": it.id,
                    "name": it.name,
                    "count": 0,
                    "price": it.price,
                    "supplier_name": "",
                    "type": it.type,
                    "unit": it.unit,
                    "level": it.level,
                    "place": it.place,
                    "brand": it.brand,
                    "remark": it.remark
                })))
            },
            deleteEvt(id) {
                this.$emit(
                    'input',
                    this.value.filter(it => it.detail_id !== id)
                )
            }
        }
    }
</script>